<template>
  <div class="street">
    <div class="search bg-ff pd-10 after b-r-5">
      <div class="title f-l f-w-b" style="color:#333;font-size:14px;line-height:33px">整改排名</div>
      <div class="f-r">
        <el-input
          v-model="search.value"
          size="small"
          placeholder="搜索名称"
          class="input"
          @keyup.enter.native="searchHandle();page.current=1"
        ></el-input>
        <el-select
          v-model="search.year"
          placeholder="请选择年份"
          filterable
          clearable
          size="small"
          @change="searchPeriod"
          class="mr-10"
        >
          <el-option :label="item" :value="item" v-for="item in yearList" :key="item"></el-option>
        </el-select>
        <el-select
          v-model="search.period"
          placeholder="请选择期数"
          filterable
          clearable
          size="small"
          class="mr-10"
        >
         <el-option
                :value="'第'+changeIntChar(item)+'期'"
                v-for="item in periodList.period"
                :key="item"
              ></el-option>
        </el-select>
        <el-button
          size="small"
          type="primary"
          @click="searchHandle();page.current=1"
          class="button"
        >搜索</el-button>
      </div>
    </div>
    <div class="box bg-ff b-r-5 mt-10" v-loading="loading">
      <ul class="list after" v-if="list.length">
        <div class="left">
          <li v-for="(item,index) in list.slice(0,5)" :key="index">
            <p>{{index+1}} : {{item.title}}</p>
            <p :style="{width:item.score+'%'}">{{item.score}}</p>
          </li>
        </div>
        <div class="right">
          <li v-for="(item,index) in list.slice(5,10)" :key="index">
            <p>{{index+6}} : {{item.title}}</p>
            <p :style="{width:item.score+'%'}">{{item.score}}</p>
          </li>
        </div>
      </ul>
      <empty info="暂时没有数据" v-else></empty>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      search: {
        value: "",
        year: "",
        period: ""
      },
      // 年份
      yearList: [],
      // 期数
      periodList: [],
      loading: false
    };
  },
  methods: {
        // 数字转字符串 1 -> 一
    changeIntChar(i){
      var c = ['','一','二','三','四','五','六','七','八','九','十'];
      return c[i];
    },
    // 搜索期数
    searchPeriod(year) {
      // 清空期数
      this.search.period = [];
      // 清空期数列表
      if (!year) {
        this.periodList = [];
        return false;
      }
      var data = {
        year: year
      };
      this.axios.post("/admin/Index/search_year_period", data).then(ref => {
        var ref = ref.data;
        if (ref.state) {
          this.periodList = ref.other.data[0];
        }
      });
    },
    // 搜索年份
    searchYear() {
      this.axios.post("/admin/Index/search_year_period").then(ref => {
        var ref = ref.data;
        if (ref.state) {
          var data = ref.other.data,
            year = [];
          for (var i in data) {
            if (year.indexOf(data[i].year) == -1) {
              year.push(data[i].year);
            }
          }
          this.yearList = year;
        }
      });
    },
    // 计算得分
    calsulateScore(item) {
      if (item.sum_score == 0) {
        return "0.00";
      }
      var s = 0;
      s = ((item.sum_score - item.after_score) / item.sum_score) * 100;
      return parseFloat(s).toFixed(0);
    },

    searchHandle() {
      this.loading = true;
      // 搜索
      var search = this.search;
      var data = {
        info: search.value,
        year: search.year,
        period: search.period,
        user_id: this.$store.state.user.id,
        user_type: this.$store.state.user.type
      };
      this.axios.post("/admin/Index/search_village_ranking", data).then(ref => {
        var ref = ref.data;
        if (ref.state) {
          var data = ref.other.data;
          for (var i in data) {
            data[i].score = this.calsulateScore(data[i]);
          }
          data.sort(function(a, b) {
            return b.score - a.score;
          });
          this.list = data;
        } else {
          this.common.message({ message: ref.info, type: "error" });
        }
        this.loading = false;
      });
    }
  },
  created() {
    this.searchYear();
    this.searchHandle();
  }
};
</script>

<style scoped>
.search {
  border-bottom: 1px solid #f3f5f7;
}
.search .input {
  width: 200px;
  margin-right: 10px;
}
/* 排行榜 */
.list {
  padding: 20px;
}
.list .left {
  width: calc(50% - 10px);
}
.list .right {
  width: calc(50% - 10px);
}
.list li:nth-of-type(n + 2) {
  margin-top: 15px;
}
.list li:nth-of-type(2n) {
  margin-right: 0;
}
.list li p {
  margin: 0;
}
.list li p:nth-of-type(1) {
  color: #666;
}
.list li p:nth-of-type(2) {
  background-color: #c0c4cc;
  color: #fff;
  line-height: 23px;
  padding: 0 10px;
  border-radius: 3px;
  margin-top: 15px;
  min-width: 10%;
  box-sizing: border-box;
}
.list .left li:nth-of-type(1) p:nth-of-type(2) {
  background-color: #e0b330;
}
.list .left li:nth-of-type(2) p:nth-of-type(2) {
  background-color: #d2cfca;
}
.list .left li:nth-of-type(3) p:nth-of-type(2) {
  background-color: #dab08f;
}
</style>